<template>
  <div class="container">
    <div>
      <el-row>
        <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="时间周期：">
              <el-select
                style="width: 180px"
                v-model="queryType"
                placeholder="请选择"
                @change="changeHandler"
              >
                <el-option
                  v-for="item in queryTypeList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="被考核单位：" style="width: 270px">
              <el-select v-model="DW" placeholder="请选择" clearable>
                <el-option
                  v-for="item in unitData"
                  :key="item.CLIENT_NO"
                  :label="item.UNITNAME"
                  :value="item.CLIENT_NO"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="考核项目：" style="width: 270px">
              <el-select v-model="XM" placeholder="请选择" clearable>
                <el-option
                  v-for="item in itemData"
                  :key="item.ID"
                  :label="item.ITEMNAME"
                  :value="item.ID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="选择时间：">
              <el-date-picker
                v-model="valueDay"
                :type="typeDatePicker"
                :value-format="formatDatePicker"
                placeholder="选择时间"
                style="width: 180px"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form label-width="100px">
            <el-form-item label="考核类型：" style="width: 270px">
              <el-select v-model="LX" placeholder="请选择" clearable>
                <el-option
                  v-for="item in typeData"
                  :key="item.ID"
                  :label="item.TYPENAME"
                  :value="item.ID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form style="margin-left: ">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      border
      highlight-current-row
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <!-- <el-table-column
        prop="CHECKTYPEID"
        label="编号"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="TYPENAME"
        label="考核类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="AREANAME"
        label="被考核单位"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ITEMNAME"
        label="考核项目"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WORKDATE"
        label="日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="LPOINT"
        label="扣分值"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="GPOINT"
        label="得分"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column label="车牌图片">
        <template slot-scope="scope">
          <el-image style="width: 40px; height: 40px" :src="scope.row.Image1" @click="big1(scope.row)"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="环境图片">
        <template slot-scope="scope">
          <el-image style="width: 40px; height: 40px" :src="scope.row.Image2" @click="big2(scope.row)"></el-image>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog title="考核详情" :visible.sync="showS" width="50%">
      <el-table border :data="statisticsData">
        <el-table-column
          prop="TYPENAME"
          label="考核类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="NAME"
          label="被考核对象"
          align="center"
        ></el-table-column>
        <el-table-column prop="standard" label="考核标题" align="center"
          ><template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.KHCONTENT"
              placement="top"
            >
              <el-tag size="medium">{{ scope.row.TITLE }}</el-tag>
            </el-tooltip>
          </template></el-table-column
        >
        <el-table-column
          prop="CONTENT"
          label="扣分描述"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="LPOINT"
          label="扣分值"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="KHCONTENT"
          label="考核内容描述"
          align="center"
        ></el-table-column> -->
        <!-- <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit2(scope.$index, scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span> -->
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog title="扣分详情" :visible.sync="showP" width="50%">
      <el-table border :data="pointData">
        <el-table-column
          prop="TYPENAME"
          label="考核类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="NAME"
          label="被考核对象"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TITLE"
          label="考核标题"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="standard" label="考核标准" align="center"
          ><template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.TITLE"
              placement="top"
            >
              <el-tag size="medium">{{ scope.row.CONTENT }}</el-tag>
            </el-tooltip>
          </template></el-table-column
        > -->
        <el-table-column
          prop="CONTENT"
          label="扣分描述"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="LPOINT"
          label="扣分值"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="KHCONTENT"
          label="考核内容描述"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit1(scope.$index, scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column> -->
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      typeData: [],
      unitData: [],
      itemData: [],
      statisticsData: [],
      pointData: [],
      DW: "",
      XM: "",
      LX: "",
      typeDatePicker: 'date',
      formatDatePicker: 'yyyy-MM-dd',
      valueDay: '',
      queryType: 1,
      queryTypeList: [{
        value: 1,
        label: '按日期查询'
      }, {
        value: 2,
        label: '按月份查询'
      }, {
        value: 3,
        label: '按年份查询'
      }],
      loading: false,
      showS: false,
      showP: false,
      URLByTYPE: 'Worker'
    }
  },
  created () {
    this.valueDay = formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd')
  },
  mounted () {
    this.getUnitList()
    this.getTypeList()
    this.getItemList()
    this.getlistdata()
  },
  methods: {
    // 获取考核单位列表
    async getUnitList () {
      var url = 'Assess/GetUnit_Assess?UNITNAME='
      let { data } = await this.$Http.get(url)
      this.unitData = data
    },
    // 获取考核类型列表
    async getTypeList () {
      var url = 'Assess/GetCheckType_Assess?TYPENAME='
      let { data } = await this.$Http.get(url)
      this.typeData = data
    },
    // 获取考核项目列表
    async getItemList () {
      var url = 'Assess/GetCheckItem_Assess?KEY='
      let { data } = await this.$Http.get(url)
      this.itemData = data
    },
    async getlistdata () {
      var url = '/Assess/GetStatisticsCheckTypePoint_Assess?WORKDATE=' + this.valueDay + '&CLIENT_NO=' +
        this.DW + '&ITEMID=' + this.XM + '&CHECKTYPE=' + this.LX
      const { data } = await this.$Http.get(url)
      this.tableData = data
    },
    changeHandler () {
      switch (this.queryType) {
        case 1:
          this.typeDatePicker = 'date'
          this.formatDatePicker = 'yyyy-MM-dd'
          break
        case 2:
          this.typeDatePicker = 'month'
          this.formatDatePicker = 'yyyy-MM'
          break
        case 3:
          this.typeDatePicker = 'year'
          this.formatDatePicker = 'yyyy'
          break
        default:
          break
      }
      this.valueDay = ''
    },
    // 导出Excel
    exportExcel () {
      let excelName = '考核类型得分统计'
      var tHeader = ['考核类型', '被考核单位', '考核项目', '日期', '扣分值', '得分']
      var filterVal = ['TYPENAME', 'AREANAME', 'ITEMNAME', 'WORKDATE', 'LPOINT', 'GPOINT']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    //详情
    handleEdit (index, row) {
      this.showS = true
      this.form = Object.assign({}, row);
      this.getStatisticsList()
    },
    // 获取记录详情
    async getStatisticsList () {
      var url = 'Assess/GetStatisticsCheckTypePointDetail_Assess?WORKDATE=' + this.form.WORKDATE + '&CLIENT_NO=' +
        this.form.CLIENT_NO + '&ITEMID=' + this.form.CHECKITEMID + '&CHECKTYPE=' + this.form.CHECKTYPEID
      let { data } = await this.$Http.get(url)
      this.statisticsData = data
    },
    handleEdit2 (index, row) {
      this.showP = true
      this.getPointList (row)
    },
    // 获取扣分详情
    async getPointList (row) {
      var url = 'Assess/GetStatisticsTaskDetailNext_Assess?TaskID=' + this.form.ID + '&OBJECTID=' + row.OBJECTID
      let { data } = await this.$Http.get(url)
      this.pointData = data
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>